// components/test/test.js
Component({

	/**
	 * styleIsolation 的可选值:
	 * 		isolated 是 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
	 * 		apply-shared 否 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
	 * 		shared 否 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件
	 */
	options: {
		styleIsolation: "isolated"		// 启用样式隔离
	},

	/**
	 * 组件的属性列表
	 */
	properties: {
		// 第一种方式：简化形式
		// max: Number
		// 第二种方式：完整形式
		max: {
			type: Number,		// 属性的数据类型
			value: 5				// 属性的默认值
		}
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		count: 0
	},

	/**
	 * 组件的方法列表
	 * 包含 事件处理函数 和 自定义方法
	 */
	methods: {
		// 点击事件处理函数
		addCount() {
			if (this.data.count >= this.properties.max) return;
			this.setData({
				count: this.data.count + 1,
				max: this.properties.max + 1
			});
			this._showCount();	// 通过 this 直接调用自定义方法
		},
		// 自定义方法，建议以 _ 开头
		_showCount() {
			wx.showToast({
				title: 'count的值是：' + this.data.count,
				icon: "none"
			})
		},
		// showInfo 点击事件处理函数
		showInfo() {
			console.log(this.data);												// {count: 0, max: 9}
			console.log(this.properties);									// {count: 0, max: 9}
			// data 数据 和 properties 属性 【在本质上是一样的，都是可读可写的】
			// 【data 存储组件的私有数据，properties 存储外界传递到组件中的数据】
			console.log(this.data === this.properties);		// true
		},
	}
})
